<template>
<div id="notification">
  <!-- <van-search
    background="#f6f6f6"
    v-model="searchContent"
    placeholder="请输入搜索内容"
    show-action
    @search="onSearch"
    @cancel="onCancel"
  > -->
    <!-- <div slot="action" @click="onSearch" style="padding: 0 8px;color: #38f;">搜索</div>
  </van-search> -->
  <van-tabs type="card" class="tab" swipeable :duration="0.3">

    <van-tab  title="消息" >
      <van-list
      :finished="messageFinished"
      @load="onMessageLoad"
      >
       <div class="messageitem" v-for="(message,index) in $store.state.messages.list" :key="index" @click="toDialog(index)">
          <img :src="message.avatar" alt="" class="left avatar">
          <div class="right">
            <div class="line">
              <div class="name" > {{message.sender?message.sender:'未知用户'}}
                <!-- <van-icon name="more" style="top:2px;padding-left:3px;color:#dd2222" /> -->
              </div>
              <div class="time">{{message.createTime}}</div>
            </div>
            <div class="content">{{message.content?message.content.substring(0,15)+'...':'没有消息'}}</div>
          </div>
       </div>
       <div style="height:43px;width:100%"/>
      </van-list>
    </van-tab>
    <van-tab  title="通知">
      <van-list
      :finished="notificationFinished"
      @load="onNotificationLoad"
      >
       <div class="notificationitem" v-for="(notification,index) in $store.state.notification" :key="index" @click="toOfferStatus(notification)">
          <van-row>
            <div class="left">简历通知</div>
            <div class="right">{{notification.createTime||'未知时间'}}</div>
          </van-row>
          <van-row class="content" v-if="notification.type == 1">
            您在<span style="color:#38f">{{notification.pname}}</span>职位中投递的<span style="color:#38f">{{notification.rname}}</span>人才状态已经更新为<span style="color:#38f">{{peopleSatInfo[notification.prstatus]}}</span>
          </van-row>
          <van-row class="content" v-else>
            您的<span style="color:#38f">{{notification.pname}}</span>职位有一条新的简历投递
          </van-row>
          
       </div>
       <div style="height:43px"></div>
      </van-list>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import Config from './project.config.js'
export default {
  data:function(){
    return{
      searchContent: null,
      notificationFinished: false,
      messageFinished:false,
      messages:[],
      notifications:[],
      peopleSatInfo:['未审核','已审核','已推荐','已面试','已发OFFER','入职','淘汰','已结算'],
    }
  },
  methods:{
    toOfferStatus(notification){
      if(this.$store.state.user.role == 1){
        return
      }
      console.log('====================================');
      console.log('去投递状态页面',notification);

      this.$router.push({
        name: 'offerstatus',
        query:{
          positionid: notification.positionid
        }
      });
      console.log('====================================');
    },
    toDialog:function(index){
      console.log('去对话页面 ')

      this.$router.push({
        name:'dialog',
        params:{
          id:this.$store.state.messages.list[index].receiverid==this.$store.state.user.id?this.$store.state.messages.list[index].senderid:this.$store.state.messages.list[index].receiverid,
          avatar:this.$store.state.messages.list[index].avatar
          }})
    },
    onSearch:function(){

    },
    onCancel:function(){

    },
    onMessageLoad:function(){

    },
    onNotificationLoad:function(){

    }
  },
  mounted:function(){
    this.$store.commit('showTab')
    this.$http.get(Config.baseUrl+'/api/messages/1/1').then(function(rsp){
      this.$store.state.messages.list = rsp.data.list
    },function(error){
      console.log(error)
    })
    this.$http.get(Config.baseUrl+'/api/messages/0/1').then(function(rsp){
      this.$store.state.notification = rsp.data.list
    },function(error){
      console.log(error)
    })

  }
}
</script>

<style lang="stylus" scoped>
#notification{
  padding-top 20px
}
.van-tabs__nav--card{
  width 50%
}
.notificationitem{
  padding 10px 16px
  font-size 14px
  margin-top 6px
  background white
}
.notificationitem .content{
  // padding-bottom 8px
  flex-shrink 1
  padding-top 5px
  letter-spacing 1.2px
  font-size 12px
  color #6e6e6e
}
.notificationitem .left{
  float left
}
.notificationitem .right{
  float right
}
.messageitem{
  padding 5px 14px
  font-size 14px
  margin-top 6px
  background white
  height 60px
  display flex
  flex-direction row
  justify-content left
}
.messageitem .left{

}
.messageitem .right{
  flex 1
  padding 5px 10px
}
.messageitem .name{
  font-size 1.2rem
}
.messageitem .content{
  flex 1
  font-size 1rem
  padding-top 5px
  color #999
  max-height 3rem
  text-overflow:ellipsis;
  white-space nowrap
  overflow hidden
}
.messageitem .avatar{
  padding-top 5px
  height 50px;
  width 50px;
  border-radius 100%
}
.messageitem .line{
  display flex
  justify-content space-between
}


</style>

